<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>vant3</title>
    <link rel="stylesheet" href="./style/index.css"/>
    <link rel="stylesheet" href="./style/base.css"/>
    <script src="./js/vue@3.js"></script>
    <script src="./js/vant.min.js"></script>
    <script src="./js/utils.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/request.js"></script>
    <script src="./js/areaList.js"></script>
</head>
<body>
<div id="app">
    <page-header :title="title"></page-header>
    <div class="main">
        <div class="search-con">
            <van-search
                    v-model="keyword"
                    show-action
                    placeholder="请输入搜索关键词"
                    @search="onSearch"
                    @cancel="onCancel"
            ></van-search>
        </div>
        <div class="list-con">
            <van-list
                    v-model:loading="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
            >
                <van-cell v-for="item in list" :key="item" >
                    <template #default>
                        <div class="cell-con">
                            <div class="header flex-between">
                                <div>{{item.title}}</div>
                                <div>
                                    <van-button type="primary" size="small" plain>详情</van-button>
                                    <van-button type="warning" size="small" plain @click="onReport(item.id)">上报</van-button>
                                </div>
                            </div>
                            <div class="content">
                                <ul>
                                    <li>
                                        <p><span>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</span><span>{{item.name}}</span></p>
                                    </li>
                                    <li>

                                        <p><span>联系电话：</span><span>{{item.phone}}</span></p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </template>
                </van-cell>
            </van-list>
        </div>
        <van-dialog v-model:show="dialogShow" title="信息上报" :show-confirm-button="false">
            <van-form @submit="onSubmit" ref="formRef">
                <van-cell-group inset>
                    <van-field
                            v-model="form.code"
                            name="上报编号"
                            label="上报编号"
                            placeholder="请输入上报编号"
                            :rules="[{ required: true, message: '请填写上报编号' }]"
                    ></van-field>
                    <van-field
                            v-model="form.area"
                            is-link
                            readonly
                            name="area"
                            label="上报区域"
                            placeholder="点击选择上报位置"
                            @click="showArea = true"
                            :rules="[{ required: true, message: '请选择上报区域' }]"
                    ></van-field>
                </van-cell-group>
                <div style="margin: 16px;" class="dialog-control">
                    <van-button round block type="default" size="small" @click="onDialogCancel">
                        取消
                    </van-button>
                    <van-button round block type="primary" size="small" native-type="submit">
                        上报
                    </van-button>
                </div>
            </van-form>
        </van-dialog>
        <van-popup v-model:show="showArea" position="bottom">
            <van-area
                    :area-list="areaList"
                    @confirm="onConfirm"
                    @cancel="showArea = false"
                    value="230102"
            ></van-area>
        </van-popup>
    </div>
    <div class="main-footer">
        <page-footer></page-footer>
    </div>
</div>

<script>
    // optionAPI
    const ListVueApp = {
        name: 'ListView',
        data() {
            return {
                title: 'Vant-list',
                keyword: '',
                loading: false,
                finished: false,
                list: [],
                pageNum: 1,
                dialogShow: false,
                showArea: false,
                form: {},
                areaList: AreaList,
                currentId: 0
            }
        },
        mounted() {
            // console.log(this.list)
            this.init()
        },
        methods: {
            init() {
              $request.get('/list', {pageNum: this.pageNum}).then(res => {
                  this.list = res
                  // console.log(res)
              })
            },
            onSearch() {
                console.log('search')
            },
            onCancel() {
                console.log('cancel')
            },
            onReport(id) {
                this.dialogShow = true
                this.currentId = id
            },
            onSubmit() {
                console.log(this.form)
                $request.post('/report/add', {...this.form, id: this.currentId}).then(res => {
                    // console.log(res)
                    if (res) {
                        this.onDialogCancel()
                        setTimeout(function () {
                            vant.Toast.success('上报成功')
                        }, 200)
                    }
                })
            },
            onConfirm (areaValues) {
                this.showArea = false;
                this.form.area = areaValues
                    .filter((item) => !!item)
                    .map((item) => item.name)
                    .join('/');
            },
            onDialogCancel() {
                // console.log(1)
                this.$refs.formRef.resetValidation()
                this.dialogShow = false
            },
            onLoad() {
                const _that = this
                setTimeout(() => {
                    // console.log(_that.list)
                    for (let i = 0; i < 10; i++) {
                        _that.list.push({ name:  'doria11', phone: '18646834023', title: '标题11'},);
                    }

                    // 加载状态结束
                    _that.loading = false;

                    // 数据全部加载完成
                    if (_that.list.length >= 40) {
                        _that.finished = true;
                    }
                }, 1000);
            }
        }
    }

    const app = Vue.createApp(ListVueApp)
    app.use(vant);
    // app.use(vant.Lazyload); // 如果需要懒加载需要单独引入
    app.component('PageHeader', PageHeader)
    app.component('PageFooter', PageFooter)
    app.mount('#app')


</script>
</body>
</html>
